<!--
 * @Description: 系统首页
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:02
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:01:06
-->
<template>
  <div class="bgc" id="bgc_img">
    <div class="content">
      <!-- 上半部分 -->
      <div class="content_top">
        <div class="charts" style="background-color: #fdc660;">
          <div class="title">设备总数</div>
          <template>
            <div class="val">
              <span>{{ this.total_line }} 个</span>
            </div>
          </template>
        </div>
        <div class="charts" style="background-color: #fda065;">
          <div class="title">在线设备数</div>
          <div class="val">
            <span>{{ this.on_line }} 个</span>
          </div>
        </div>
        <div class="charts" style="background-color: #f86b66;">
          <div class="title">离线设备数</div>
          <div class="val">
            <span>{{ this.off_line }} 个</span>
          </div>
        </div>
        <div class="charts" style="background-color: #e6003b;" @click="toEngList">
          <div class="title">工程总数</div>
          <div class="val">
            <span>{{ this.engtotal }}个</span>
          </div>
        </div>
        <div class="charts" style="background-color: #8774f2;" @click="toOrderList">
          <!-- <router-link to="../../pages/am/order/List"> -->
          <div class="title">工单总数</div>
          <div class="val">
            <span>{{ this.worktotal }}个</span>
          </div>
          <!-- </router-link> -->
        </div>

      </div>
      <!-- 上半部分结束 -->
      <!-- 下半部分 -->
      <div class="content_bottom">
        <el-row>
          <el-col :span="9">
            <!-- 下半部分左边 -->
            <div class="content_bottom_left">
              <!-- 地图 -->
              <Map>

              </Map>
            </div>
          </el-col>
          <el-col :span="15">
            <!-- 下半部分右边 -->
            <div class="content_bottom_right">
              <!-- 下半部分右边上半部分 -->
              <div class="content_bottom_right_top">
                <el-row>
                  <el-col :span="12">
                    <div class="right_top_left">
                      <C221>

                      </C221>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="right_top_right">
                      <C222>

                      </C222>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="content_bottom_footer">
                <C223>

                </C223>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
  
<script>

import Map from './components/Map.vue'
import C221 from './components/C221.vue';
import C222 from './components/C222.vue';
import C223 from './components/C223.vue';
import { get } from '@/utils/request';

export default {
  components: {
    Map,
    C221,
    C222,
    C223,
  },
  data() {
    return {
      // 存放设备信息
      myEngData: [],
      // 分页数据 
      params: {
        page: 1,
        pageSize: 100,
      },
      // 工单总数
      worktotal: 0,
      // 工程总数
      engtotal: 0,
      // 离线设备数
      off_line: 0,
      // 在线设备数
      on_line: 0,
      // 设备总数
      total_line: 0,
    };
  },
  computed: {},
  methods: {
    async getWorkData() {
      let res = await get('/workorder/pageQuery', this.params);
      // console.log(res,'获取响应');
      this.worktotal = res.data.total;
    },
    async getEngData() {
      let res = await get('/engineer/pageQuery', this.params);
      // console.log(res, '获取响应');
      this.engtotal = res.data.total;
    },
    async getDevice() {
      let i = 0;
      let res = await get('/dashboard/queryDeviceOnlineNumber');
      // console.log(res,'获取响应');
      // 将设备在线数目赋值给on_line
      this.on_line = res.data[0].value;
      // 将设备离线数目赋值给off_line
      this.off_line = res.data[1].value;
      // 设备总数 等于 在线 + 离线 设备数目
      this.total_line = this.on_line + this.off_line;
    },
    // 跳转到工单详情页面
    toEngList() {
      // 路由跳转
      this.$router.push({
        path: "/am/engineer/List"
      });
    },
    // 跳转到工单详情页面
    toOrderList() {
      // 路由跳转
      this.$router.push({
        path: "/am/order/List"
      });
    },
  },
  created() {
    this.getWorkData();
    this.getEngData();
    this.getDevice();
  },
  mounted() { },
};
</script>
<style lang="scss">
.content {

  .content_top {
    // 设置弹性盒
    display: flex;
    position: static;
    overflow: hidden;
    margin-bottom: 1em;
    color: #fff;
    box-sizing: border-box;

    .charts {
      // 每个charts共享空间比例为1
      padding: 1em;
      flex: 1;
      height: 120px;
      margin-right: .5em;
      margin-top: 1.5em;
      // background-color: #fdc660;

    }
  }

  // 下半部分
  .content_bottom {
    margin-top: 3em;
    margin-bottom: 1em;
    height: 400px;

    // 下半部分左边
    .content_bottom_left {
      display: inline-block;
      width: 482px;
      height: 400px;
      margin-right: .5em;
    }

    // 下半部分右边
    .content_bottom_right {
      height: 400px;
      margin-left: 30px;
      width: 723px;
      display: flex;
      flex-direction: column;

      .content_bottom_right_top {
        height: 180px;
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
      }

      // 下半部分底部
      .content_bottom_footer {
        height: 200px;

      }
    }
  }
}

// title标签
.title {
  line-height: 3em;
  font-size: 18px;
  font-weight: 700;
}

.val {
  font-size: 14px;
  // 设置字体靠右对齐
  text-align: right;
}

.right_top_left {

  height: 200px;
  width: 362px;
  padding: .5em;
  flex: 1;
}

.right_top_right {
  height: 200px;
  width: 361px;
  padding: .5em;
  flex: 1;
}
.bgc{
  width: 1232.8px;
  height: 672.4px;
}
#bgc_img{
  background:url("genshin.jpg");
  position:fixed;
  background-size: 100% 100%;
}
</style>
  